import React from "react";
import styled from "styled-components";
import { withRouter } from "react-router-dom";
const TabWrapper = styled.div`
  position: fixed;
  top: 84px;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: #fff;
`;
const TabItem = styled.div`
  height: 100%;
  line-height: 40px;
  flex: 1;
  font-size: 15px;
  text-align: center;
  &.active {
    color: #d43c33;
  }
  &.active .tabtxt::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 3;
    width: 100%;
    height: 4px;
    transform: scaleY(0.5);
    background: #dd001b;
  }
  .tabtxt {
    display: inline-block;
    padding: 0 5px;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    line-height: 40px;
  }
`;
function Tab(props) {
  const handleClick = path => {
    props.history.replace(path);
  };
  const className = path =>
    props.location.pathname.includes(path) ? "active" : "";
  return (
    <TabWrapper className="border-bottom">
      <TabItem
        className={className("/recommend")}
        onClick={handleClick.bind(this, "/recommend")}
      >
        <span className="tabtxt">
          <span className="txt">推荐音乐</span>
        </span>
      </TabItem>
      <TabItem
        className={className("/hot")}
        onClick={handleClick.bind(this, "/hot")}
      >
        <div className="tabtxt">
          <span className="txt">热歌榜</span>
        </div>
      </TabItem>
      <TabItem
        className={className("/search")}
        onClick={handleClick.bind(this, "/search")}
      >
        <div className="tabtxt">
          <span className="txt">搜索</span>
        </div>
      </TabItem>
    </TabWrapper>
  );
}

export default withRouter(Tab);
